<template>
	<view>
		<view class="UCenter-bg" :style="'background-image: url(https://cdn.zhoukaiwen.com/zjx_me_bg6.jpg)'">
			<image
				src="http://172.16.1.181:8880/images/bg.gif"
				mode="scaleToFill"
				class="gif-wave"
			></image>
		</view>
		<view class='padding flex text-center text-grey bg-white shadow-warp-my'>
			<view class='flex flex-sub flex-direction solid-right'>
				<view class="text-xxl text-orange">11.6k+</view>
				<view class="margin-top-sm">
					<text class='cuIcon-hot'></text> 访客</view>
			</view>
			<view class='flex flex-sub flex-direction solid-right'>
				<view class="text-xxl text-blue">8.6k</view>
				<view class="margin-top-sm">
					<text class='cuIcon-share'></text> 分享</view>
			</view>
			<view class='flex flex-sub flex-direction'>
				<view class="text-xxl text-red">2.6k+</view>
				<view class="margin-top-sm">
					<text class='cuIcon-like'></text> 点赞</view>
			</view>
		</view>

		<view class="cu-list menu card-menu margin-top">
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">关于作者</text>
				</view>
			</view>

			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
					<text class="text-grey">爱好</text>
				</view>
				<view class="action">
					<view class="cu-tag round bg-orange light">音乐</view>
					<view class="cu-tag round bg-olive light">电影</view>
					<view class="cu-tag round bg-blue light">旅行</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.UCenter-bg {
	background: #fff;
	background-size: 100% 100%;
	/* background-size: cover; */
	height: 300rpx;
	display: flex;
	justify-content: center;
	padding-top: 40rpx;
	overflow: hidden;
	position: relative;
	flex-direction: column;
	align-items: center;
	color: #fff;
	font-weight: 300;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
}
.shadow-warp-my {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.shadow-warp-my:before,
	.shadow-warp-my:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
		transform: rotate(-6deg);
		z-index: -1;
	}

	.shadow-warp-my:after {
		right: 20rpx;
		left: auto;
		transform: rotate(6deg);
	}
</style>
